/* 列表页面通用样式 */

// 主容器样式
.app-container {
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  background-color: var(--ba-bg-color);
  overflow: auto; // 确保主容器可以滚动
  
  // 卡片盒子样式
  .box-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--el-box-shadow-light);
    margin-bottom: 16px;
    background: var(--ba-bg-color-overlay);
    border: none;
    transition: all 0.3s;
    
    &:hover {
      box-shadow: var(--el-box-shadow);
    }
    
    // 卡片标题
    .el-card__header {
      padding: 14px 20px;
      font-weight: 500;
      border-bottom: 1px solid var(--el-border-color-light);
      background-color: var(--ba-bg-color-overlay);
    }
    
    // 卡片内容
    .el-card__body {
      padding: 16px 20px;
    }
    
    // 卡片头部样式
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  
  // 搜索区域样式
  .filter-container {
    display: flex;
    flex-wrap: wrap;
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 300px;
    overflow: hidden;
    opacity: 1;
    
    &.filter-collapsed {
      max-height: 0;
      opacity: 0;
    }
    
    .el-form {
      width: 100%;
      
      .el-form-item {
        margin-bottom: 16px;
        margin-right: 16px;
        
        .el-form-item__label {
          font-weight: 500;
          width: 80px;
          text-align: right;
        }
        
        .el-input, .el-select {
          width: 220px;
        }
      }
      
      .search-buttons-container {
        margin-left: 80px;  // 与标签对齐
      }
      
      .search-buttons {
        display: flex;
        align-items: center;
        gap: 10px;
        
        .el-button {
          min-width: 80px;
        }
      }
    }
  }
  
  // 表格区域样式
  .table-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    
    // 表格操作按钮区
    .table-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .left-buttons {
        display: flex;
        flex-wrap: wrap;
        
        .el-button {
          margin-right: 10px;
          margin-bottom: 5px;
        }
      }
      
      .right-buttons {
        display: flex;
        flex-wrap: wrap;
        
        .el-button {
          margin-left: 10px;
          margin-bottom: 5px;
        }
      }
    }
    
    // 表格样式
    .el-table {
      width: 100%;
      border-radius: 8px;
      
      // 表头样式
      .el-table__header-wrapper {
        th {
          background-color: var(--ba-bg-color-page);
          color: var(--el-text-color-primary);
          font-weight: 600;
          font-size: 14px;
          height: 50px;
        }
      }
      
      // 表体样式
      .el-table__body-wrapper {
        overflow-y: auto;
        
        td {
          padding: 12px 0;
        }
        
        .cell {
          line-height: 1.5;
        }
      }
      
      // 空数据样式
      .el-table__empty-block {
        min-height: 200px;
      }
      
      // 表格内链接样式
      .table-link {
        color: var(--el-color-primary);
        text-decoration: none;
        cursor: pointer;
        
        &:hover {
          text-decoration: underline;
        }
      }
      
      // 操作按钮样式
      .operation-buttons, 
      .table-operation-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        
        .el-button {
          margin: 2px 0;
        }
      }
    }
    
    // 确保表格有水平滚动条
    .el-table--border, .el-table--group {
      overflow-x: auto !important;
    }
    
    // 表格固定列样式
    .el-table .fixed-right-patch {
      background-color: var(--ba-bg-color-page);
    }
    
    // 分页样式
    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      padding: 10px 0;
    }
  }
  
  // 弹窗样式
  .el-dialog {
    border-radius: 8px;
    overflow: hidden;
    
    .el-dialog__header {
      padding: 16px 20px;
      margin-right: 0;
      border-bottom: 1px solid var(--el-border-color-light);
      
      .el-dialog__title {
        font-size: 16px;
        font-weight: 600;
      }
    }
    
    .el-dialog__body {
      padding: 20px;
      max-height: calc(80vh - 120px);
      overflow-y: auto;
      
      .el-form-item {
        margin-bottom: 20px;
        
        .el-form-item__label {
          font-weight: 500;
        }
        
        .form-help {
          font-size: 12px;
          color: var(--el-text-color-secondary);
          margin-top: 4px;
        }
      }
    }
    
    .el-dialog__footer {
      padding: 10px 20px;
      border-top: 1px solid var(--el-border-color-light);
      
      .dialog-footer {
        display: flex;
        justify-content: flex-end;
        
        .el-button {
          margin-left: 10px;
        }
      }
    }
  }
}

// 可滚动表格容器，用于处理表格溢出
.scrollable-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 6px; // 为滚动条留出空间
}

// 确保el-table内部滚动条正常显示
.el-scrollbar {
  width: 100%;
  .el-scrollbar__wrap {
    overflow-x: auto !important;
  }
}

// 响应式调整
@media (max-width: 768px) {
  .app-container {
    .filter-container {
      .el-form {
        .el-form-item {
          width: 100%;
          margin-right: 0;
          
          .el-input, .el-select {
            width: 100%;
          }
        }
      }
    }
    
    .table-container {
      .table-toolbar {
        flex-direction: column;
        align-items: flex-start;
        
        .left-buttons, .right-buttons {
          width: 100%;
          margin-bottom: 10px;
        }
      }
      
      .pagination {
        justify-content: center;
      }
    }
  }
}
